<template>
	<view class="page">
		<view class="container" :style="{ 'height': windowHeight + 'upx' }">
			<view class="caption-bar">
				<text class="stu-name-id">姓名: {{stu.name}}</text>
				<text class="stu-name-id">学号: {{stu.id}}</text>
			</view>
			
			<view class="content">
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">性别</text>
						<text class="item-value">{{stu.sex}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">生日</text>
						<text class="item-value">{{stu.birthday}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">民族</text>
						<text class="item-value">{{stu.nationality}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">籍贯</text>
						<text class="item-value">{{stu.birthplace}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">政治面貌</text>
						<text class="item-value">{{stu.political_status}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">是否住校</text>
						<text class="item-value">{{stu.on_campus}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">宿舍号</text>
						<text class="item-value">{{stu.room_number}}</text>
					</view>
					
					<view class="line"></view>
				</view>
				
				<view class="item-wrapper">
					<view class="item" :style="{ 'height': itemHeight + 'upx' }">
						<text class="item-key">宿舍人数</text>
						<text class="item-value">{{stu.room_mates_number}}</text>
					</view>
					
					<!-- <view class="line"></view> -->
				</view>
				
				
				<view class="line space"></view>
				<navigator url="student-detail-more/student-detail-more">
					<text class="go-detail-more">查看更多详细数据 ></text>
				</navigator>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				stu: {},
				windowHeight: 0,
				itemHeight: 0,
			}
		},
		onLoad(params) {
			this.id = params.id;
			this.getStudent(this.id);
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2;
					this.itemHeight = (this.windowHeight - 100 - 230) / 8;
				}
			})
		},
		methods: {
			getStudent(id) {
				// 向服务器发出请求,得到学生数据
				
				this.stu = {
					id: '1001',
					name: '李安国',
					sex: '女',
					clazz: '高二(01)',
					birthday: '2002-01-01',
					nationality: '汉',
					birthplace: '山西晋中',
					political_status: '共青团员',
					on_campus: '住校',
					room_number: '604',
					room_mates_number: '4'
				};
			}
		}
	}
</script>

<style>
	@import url("./student-detail.css");
</style>
